<template>
  <div class="container">
    <!-- 下部内容区 -->
    <div class="content">
      <!-- 右侧区域 -->
      <div class="right-panel">
        <div class="panel-header">
          <el-popover placement="bottom-start" :width="120" trigger="hover" popper-class="task-popover">
            <template #reference>
              <el-button class="task-button">
                新建活动
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
            </template>
            <div class="task-menu">
              <div class="task-menu-item" @click="handleImageTask">图文任务</div>
              <div class="task-menu-item" @click="handleVideoTask">视频任务</div>
            </div>
          </el-popover>
        </div>
        <div class="panel-content">
          <!-- 内容区域 -->
          <div class="content-area">
            <!-- 表格视图 -->
            <el-table :data="filteredMaterials" class="custom-table" :row-key="row => row.id" border>
              <el-table-column prop="title" label="活动名" />
              <el-table-column prop="type" label="分享类型" >
                <template #default="scope">
                  {{scope.row.type === 'images'?'图文':'视频'  }}
                </template>
              </el-table-column>
              <el-table-column prop="total_scan_count" label="扫码次数" />
              <el-table-column prop="total_send_count" label="已发送次数" />
              <el-table-column prop="video_list.length" label="选中素材" >
                <template #default="scope">
                  {{scope.row.type === 'images'?scope.row.photos.length:scope.row.video_list.length  }}
                </template>
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间">
                <template #default="scope">
                  {{ formatDate(scope.row.createTime) }}
                </template>
              </el-table-column>
              <el-table-column width="280" fixed="right">
                <template #header>
                  <el-input v-model="searchText" placeholder="搜索活动名" class="search-input custom-input"
                    :prefix-icon="Search" clearable />
                </template>
                <template #default="scope">
                  <div class="operation-buttons">
                    <el-button type="primary" class="operation-btn" @click="handleQRCode(scope.row)">
                      <el-icon>
                        <Picture />
                      </el-icon>
                      二维码
                    </el-button>
                    <el-button type="primary" class="operation-btn" @click="handleSettings(scope.row)">
                      <el-icon>
                        <Setting />
                      </el-icon>
                      设置
                    </el-button>
<!--                    <el-button
                      type="primary"
                      class="operation-btn"
                      @click="handleViewData(scope.row)"
                    >
                      <el-icon><DataAnalysis /></el-icon>
                      查看数据
                    </el-button>-->
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="pagination-bar">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
              :page-size="pageSize" :current-page="currentPage" @current-change="handlePageChange"
              @size-change="handleSizeChange" class="custom-pagination" />
          </div>
        </div>
      </div>
    </div>
    <MyDialog v-model="showMobileDownloadDialog" width="500px" @confirm="handleConfirm" title="请使用手机扫码发布">
      <div style="text-align:center; padding: 16px 0;">
        <div style="display: flex; justify-content: space-around; align-items: center;">
          <div style="text-align: center;">
            <div style="margin-bottom: 8px; font-weight: bold; color: #333;">Android</div>
            <img v-if="androidQRCodeUrl" :src="androidQRCodeUrl" alt="Android二维码" style="width:150px; height:150px;" />
            <div v-else style="width:150px; height:150px; display:flex; align-items:center; justify-content:center; color:#999; border: 1px dashed #ddd;">
              正在生成二维码...
            </div>
          </div>
          <div style="text-align: center;">
            <div style="margin-bottom: 8px; font-weight: bold; color: #333;">iOS</div>
            <img v-if="iosQRCodeUrl" :src="iosQRCodeUrl" alt="iOS二维码" style="width:150px; height:150px;" />
            <div v-else style="width:150px; height:150px; display:flex; align-items:center; justify-content:center; color:#999; border: 1px dashed #ddd;">
              正在生成二维码...
            </div>
          </div>
        </div>
      </div>
    </MyDialog>
    <MyDialog
      v-model="showSettingDialog"
      title="发布设置"
      width="600px"
      @confirm="handleSettingConfirm"
    >
      <el-form :model="settingForm" label-width="120px" class="white-form">
        <el-form-item label="活动名称">
          <el-input v-model="settingForm.name" placeholder="请输入活动名称"/>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="settingForm.title" type="textarea" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="话题">
          <el-input-tag v-model="settingForm.topics" placeholder="请输入话题，按回车添加" />
        </el-form-item>
        <el-form-item label="选中素材">
          <div style="display: flex; align-items: center; gap: 8px;">
            <el-input v-model="settingForm.materialInput" placeholder="请输入素材" style="width: 120px;" disabled/>
            <el-button type="primary" icon="el-icon-plus" @click="showMaterialDialog = true">+</el-button>
          </div>
        </el-form-item>

        <el-form-item label="随机图片数量">
          <el-input-number v-model="settingForm.randomImageCount" :min="0" placeholder="请输入随机图片数量" />
        </el-form-item>
        <el-form-item label="数据获取">
          <el-switch v-model="settingForm.dataCollect" />
        </el-form-item>
        <el-form-item label="扫码数量限制">
          <el-input-number v-model="settingForm.scanLimit" :min="0" />
        </el-form-item>
      </el-form>
    </MyDialog>
    <MyDialog
      v-model="showMaterialDialog"
      title="选择素材"
      width="50%"
      :modal="true"
      :close-on-click-modal="false"
      @confirm="handleMaterialConfirm"
    >
      <ProductPicture ref="productPictureRef" v-if="settingForm.type==='images'" @confirm="handleMaterialConfirm"/>
      <ProductVideo ref="productVideoNewRef" v-else/>
    </MyDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { Search, ArrowDown, Picture, Setting, DataAnalysis } from '@element-plus/icons-vue'
import axiosUtil from '../../axios-util/axios-util'
import utils from '../../utils/utils';
import MyDialog from "../common/MyDialog.vue";
import ProductPicture from '../videoWarehouse/ProductPictureNew.vue'
import ProductVideo from '../videoWarehouse/ProductVideoNew.vue'
import {ElMessage} from "element-plus";
import QRCode from 'qrcode';

//主题控制light  dark
const theme = utils.getTheme();

const emit = defineEmits(['view-scan-data']);

const searchText = ref('')
const materials = ref([])
const currentPage = ref(1)
const pageSize = ref(15)
const totalCount = ref(0)
let currentFolderId = ref(0)

const showSettingDialog = ref(false);
const settingForm = reactive({
  id: '',
  name: '',
  title: '',
  topics: [],
  materialCount: 0,
  materialInput: 0, // 新增的输入框
  mountType: '无',
  dataCollect: false,
  scanLimit: 0,
  randomImageCount: 0, // 随机图片数量
  poi1: '',
  poi2: '',
  poiSelect: '',
  miniId: '',
  miniTitle: '',
  miniPath: '',
  type: '',
});

const cityData = ref()

// 计算过滤后的数据
const filteredMaterials = computed(() => {
  if (!searchText.value) return materials.value
  return materials.value.filter(item =>
    item.title.toLowerCase().includes(searchText.value.toLowerCase())
  )
})

onMounted(() => {
  initMaterials()
})

const initMaterials = async (id?: number) => {
  if (typeof id === 'number') {
    currentFolderId.value = id
  }
  const response = await axiosUtil.post('api/scan_publish/xhs/scan_list', {
    limit: pageSize.value,
    offset: currentPage.value,
    // searchtitle: searchText.value,
  })
  if (response.data.code === 1 && response.data.data) {
    materials.value = response.data.data.list
    totalCount.value = response.data.data.total
  }
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  initMaterials(0)
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  initMaterials(0)
}

const handleSearch = () => {
  currentPage.value = 1
  initMaterials(0)
}

const handleImageTask = () => {
  // 清空表单
  cleanForm()
  settingForm.type = 'images'
  showSettingDialog.value = true;
}

const cleanForm = () =>{
  cityData.value = []
  Object.assign(settingForm, {
    id: '',
    name: '',
    title: '',
    topics: [],
    materialCount: 0,
    materialInput: 0,
    mountType: '无',
    dataCollect: false,
    scanLimit: 0,
    randomImageCount: 0,
    poi1: '',
    poi2: '',
    poiSelect: '',
    miniId: '',
    miniTitle: '',
    miniPath: '',
    type: '',
  });
}

const handleVideoTask = () => {
  settingForm.type = 'vedios'
  // 清空表单
  cleanForm()
  showSettingDialog.value = true;
}

const handleConfirm = () => {
  showMobileDownloadDialog.value = false
  // 清空二维码数据
  androidQRCodeUrl.value = ''
  iosQRCodeUrl.value = ''
}

const formatDate = (date: string | number | Date) => {
  if (!date) return ''
  const d = new Date(date)
  return d.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}
const showMobileDownloadDialog = ref(false)
const qrCodeDataUrl = ref('')
const androidQRCodeUrl = ref('')
const iosQRCodeUrl = ref('')

const handleQRCode = async (row: any) => {
  console.log('查看二维码', row)
  try {
    // 生成Android二维码
    if (row.qr_code && row.qr_code.android) {
      const androidQRCode = await QRCode.toDataURL(row.qr_code.android, {
        width: 150,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#FFFFFF'
        }
      })
      androidQRCodeUrl.value = androidQRCode
    }

    // 生成iOS二维码
    if (row.qr_code && row.qr_code.ios) {
      const iosQRCode = await QRCode.toDataURL(row.qr_code.ios, {
        width: 150,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#FFFFFF'
        }
      })
      iosQRCodeUrl.value = iosQRCode
    }

    showMobileDownloadDialog.value = true
  } catch (error) {
    console.error('生成二维码失败:', error)
    ElMessage.error('生成二维码失败')
  }
}

const handleSettings = (row: any) => {
  // 这里将row数据赋值到表单
  settingForm.type = row.type
  settingForm.id = row.id
  settingForm.name = row.title || '';
  settingForm.title = row.video_text || '';
  settingForm.topics = row.video_text_keyword || [];
  settingForm.materialInput = row.type==='images'?row.photos.length: row.video_list.length;
  if(row.mount_type === 'none'){
    settingForm.mountType = '无';
  }else if(row.mount_type === 'poi'){
    settingForm.mountType = 'POI地址/团购';
    cityData.value = []
    const data = {
      value : row.poi_id,
      label : row.poi_name
    }
    cityData.value.push(data)
  }else {
    settingForm.mountType = '小程序';
    settingForm.miniId = row.micro_app_info.micro_app_id
    settingForm.miniTitle = row.micro_app_info.micro_app_title
    settingForm.miniPath = row.micro_app_info.micro_app_url
  }

  settingForm.dataCollect = row.open_data===1;
  settingForm.scanLimit = row.max_release_num || 0;
  settingForm.randomImageCount = row.photos_num || 0;
  showSettingDialog.value = true;
}

const handleSettingConfirm = async () => {
  if(!selectPicSonItem.value){
    ElMessage.warning("请先上传素材")
    return
  }
  let arr = []
  let photos = ''
  if (settingForm.type === 'images') { // 图文
    for (const item of selectPicSonItem.value) {
      const res = await axiosUtil.post('api/aliyun_tongyi/wan_xiang/query_image_task', {
        id: item.id,
      })
      if (res.data.data.list) {
        res.data.data.list.forEach(itemSon => {
          arr.push(itemSon.url)
        })
      }
    }
  }else {
    selectPicSonItem.value.forEach(itemSon => {
      arr.push(itemSon.video_url_select)
    })
  }

  // 将数组转换为逗号分隔的字符串
  photos = arr.join(',')
  let data: any = {
    "title":  settingForm.name,
    "video_text": settingForm.title,
    "video_text_keyword": settingForm.topics,
    "platform_type": "none",
    "micro_app_info": {
      "micro_app_id": "",
      "micro_app_title": "",
      "micro_app_url": ""
    },
    "open_data": settingForm.dataCollect?1:0,
    "video_list": "",
    "max_release_num": settingForm.scanLimit,
    "type": "",
    "photos": '',
    "photos_num": settingForm.randomImageCount,
    "id": settingForm.id
  }
  if(settingForm.type==='images'){
    data.type = 'images'
    data.photos = photos
  }else {
    data.type = 'video'
    data.video_list = photos
  }
  if(settingForm.mountType === 'POI地址/团购'){
    if(!settingForm.poiSelect){
      ElMessage.warning("请先选择数据")
      return
          }else {
        const selectArr = cityData.value.find(item => item.value === settingForm.poiSelect)
        if(selectArr){
          data.mount_type = 'poi'
          data.poi_id = selectArr.value
          data.poi_name = selectArr.label
        }
      }
  }
  if(settingForm.mountType === '小程序'){
    if(!settingForm.miniId){
      ElMessage.warning("请先输入小程序ID")
      return
    }
    if(!settingForm.miniTitle){
      ElMessage.warning("请先输入标题")
      return
    }
    if(!settingForm.miniPath){
      ElMessage.warning("请先输入路径")
      return
    }
    data.mount_type = 'mini_program'
    data.micro_app_info.micro_app_id = settingForm.miniId
    data.micro_app_info.micro_app_title = settingForm.miniTitle
    data.micro_app_info.micro_app_url = settingForm.miniPath
  }
  // 这里可以提交表单数据
  const response = await axiosUtil.post('api/scan_publish/xhs/save', data)
  if(response.data.code === 1){
    ElMessage.success("操作成功")
    cleanForm()
    initMaterials()
  }
  showSettingDialog.value = false;
}

const handleViewData = (row: any) => {
  emit('view-scan-data', row.id);
}

const handleChooseCityKeyWord = async () => {
  if(!settingForm.poi1){
    ElMessage.warning("请输入关键词")
    return
  }
  if(!settingForm.poi2){
    ElMessage.warning("请输入城市")
    return
  }
  const res = await axiosUtil.post('api/scan_publish/xhs/search_poi', {
    "keyword": settingForm.poi1,
    "city": settingForm.poi2
  })
  if(res.data.code){
    cityData.value = []
    res.data.code.forEach(item=>{
      const son = {
        value: item.poi_id,
        label: item.province  + item.city + item.district + item.address,
      }
      cityData.value.push(son)
    })
  }
}

const showMaterialDialog = ref(false)
const productPictureRef = ref()
const productVideoNewRef = ref()
const selectPicSonItem = ref([])

const handleMaterialConfirm = () => {
  if (settingForm.type === 'images') {
    if (productPictureRef.value && productPictureRef.value.getSelectMateriaAll) {
      const selected = productPictureRef.value.getSelectMateriaAll()
      selectPicSonItem.value = selected
      settingForm.materialInput = selected.length
    }
  }else {
    if (productVideoNewRef.value && productVideoNewRef.value.getSelectMateriaAll) {
      const selected = productVideoNewRef.value.getSelectMateriaAll()
      selectPicSonItem.value = selected
      const arr = []
      selectPicSonItem.value.forEach(itemSon => {
        arr.push(itemSon.video_url_select)
      })
      const s = arr.join(",")
      const arrNew = s.split(',')
      settingForm.materialInput = arrNew.length
    }
  }
  showMaterialDialog.value = false
}

const handleDeleteActivity = () => {
  // 删除活动逻辑
  // 示例：console.log('删除活动')
}

const handleSettingCancel = () => {
  showSettingDialog.value = false;
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.content {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.right-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-radius: 12px;
  box-shadow: 0 0 20px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  backdrop-filter: blur(10px);
  overflow: hidden;
  height: 100%;
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  font-size: 1.1em;
  font-weight: bold;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.task-button {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.task-button:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)"') !important;
  transform: translateY(-2px);
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  box-shadow: none !important;
  height: 28px;
}

.search-input :deep(.el-input__inner) {
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
}

.search-input :deep(.el-input__wrapper:hover) {
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"') !important;
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)"') !important;
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  width: 100%;
}

.content-area {
  flex: 1;
  overflow: hidden;
  padding: 16px;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.pagination-bar {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  padding: 16px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-top: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

:deep(.el-pagination__total) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.el-pagination__goto) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.el-pagination__classifier) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.el-select__placeholder) {
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

/* 修改滚动条样式 */
.content-area::-webkit-scrollbar {
  width: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.content-area::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.content-area::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

/* 表格视图样式 */
.custom-table {
  background: transparent !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header th) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
  font-weight: bold !important;
}

.custom-table :deep(.el-table__header-wrapper) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__header tr) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.1)"') !important;
}

.custom-table :deep(.el-table__body-wrapper) {
  background: transparent !important;
  overflow-y: auto;
  height: calc(100% - 40px);
}

.custom-table :deep(.el-table__body td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)"') !important;
  color: v-bind('theme === "light" ? "#333" : "#fff"') !important;
}

.custom-table :deep(.el-table__row) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(16, 18, 45, 0.2)"') !important;
  transition: all 0.3s ease !important;
}

.custom-table :deep(.el-table__row:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
  /* transform: translateX(4px); */
}

.custom-table :deep(.el-table__row:hover td) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(16, 18, 45, 0.3)"') !important;
}

.custom-table :deep(.el-table__cell) {
  background: transparent !important;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 4px;
}

.operation-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 8px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.1)" : "rgba(64, 158, 255, 0.2)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"') !important;
  color: v-bind('theme === "light" ? "#409EFF" : "#fff"') !important;
  transition: all 0.3s ease !important;
  white-space: nowrap;
}

.operation-btn:hover {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"') !important;
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.3)" : "rgba(64, 158, 255, 0.4)"') !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"') !important;
}

.operation-btn .el-icon {
  font-size: 14px;
  margin-right: 2px;
}

.material-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.material-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
}

/* 分页样式 */
.custom-pagination :deep(.el-pagination) {
  background: transparent;
}

.custom-pagination :deep(.el-pagination .el-pagination__total),
.custom-pagination :deep(.el-pagination .el-pagination__jump) {
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .btn-prev),
.custom-pagination :deep(.el-pagination .btn-next) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.2)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li.active) {
  background: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.2)" : "rgba(64, 158, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(64, 158, 255, 0.5)" : "rgba(64, 158, 255, 0.6)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

.custom-pagination :deep(.el-pagination .el-pager li:hover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(0, 0, 0, 0.5)"');
  color: v-bind('theme === "light" ? "#333" : "#fff"');
}

:deep(.task-popover) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.95)" : "rgba(0, 0, 0, 0.95)"') !important;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.4)"') !important;
  backdrop-filter: blur(10px);
  padding: 4px 0 !important;
  min-width: 120px !important;
}

.task-menu {
  display: flex;
  flex-direction: column;
}

.task-menu-item {
  padding: 8px 16px;
  color: v-bind('theme === "light" ? "#333" : "#fff"');
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  line-height: 1.5;
}

.task-menu-item:hover {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.05)" : "rgba(255, 255, 255, 0.1)"');
}

/* 修改表格滚动条样式 */
.custom-table :deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
}

.custom-table :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.3)"');
  border-radius: 3px;
}

.custom-table :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.4)" : "rgba(255, 255, 255, 0.4)"');
}

.custom-table :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.2)"');
  border-radius: 3px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

/* 设置弹窗表单内容为白色 */
.white-form .el-form-item__label,
.white-form .el-input__inner,
.white-form .el-textarea__inner,
.white-form .el-select__selected-item,
.white-form .el-radio__label,
.white-form .el-input-number__decrease,
.white-form .el-input-number__increase,
.white-form .el-input-number__input {
  color: #fff !important;
}
.white-form .el-input__wrapper,
.white-form .el-textarea__inner,
.white-form .el-select__wrapper,
.white-form .el-input-number__input {
  background: transparent !important;
  border-color: #fff2 !important;
}
.white-form .el-radio__input.is-checked + .el-radio__label {
  color: #409EFF !important;
}

/* el-input-tag 样式 */
.white-form .el-input-tag {
  background: transparent !important;
  border-color: #fff2 !important;
}

.white-form .el-input-tag .el-input__inner {
  color: #fff !important;
}

.white-form .el-input-tag .el-tag {
  background: rgba(64, 158, 255, 0.2) !important;
  border-color: rgba(64, 158, 255, 0.3) !important;
  color: #fff !important;
}

.white-form .el-input-tag .el-tag .el-tag__close {
  color: #fff !important;
}

.white-form .el-input-tag .el-tag .el-tag__close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}
</style>
